{include file='common/header'}
{include file='common/nav'}
<link rel="stylesheet" href="{:HOME_ROOT}/css/comment.css"/>

<div id="container">
    <div class="view">
        <div class="top">
            <div class="date">
                <a href="{:url('Member/center', ['id'=>$info['id']])}" class='author'>{$info.nickname}</a>
            </div>
            <div class="weather">
                <a href="{:url('Diary/book', ['id'=>$info['book_id']])}" class='book'>《{$info.book_name}》</a>
            </div>
        </div>
        <p class="clear"></p>
        <div class="panel">
            <div class='item'>
                <div class='info'>
                    <div class="intro">
                        <a>{$info.content}</a>
                        {if ($info['url'])}
                        <div class="pic">
                            <img src="{:WEB_ROOT}{$info.url}" />
                        </div>
                        {/if}
                    </div>
                    <div class='option'>
                        <div class='time'>{$info.time}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="comment-area">
            <div class="form-ctr text">
                <textarea placeholder="说点什么.." v-model.trim="comment"></textarea>
                <button class="button" type="button" v-on:click="reply">
                    <i class="fa fa-comments"></i>
                </button>
            </div>
            <div class="clear"></div>

            <div class="bottom">
                <div class="comment-list">
                    <div class="comment" v-for="item in list">
                        <div class="about">
                            <div class="nick">
                                <a href="'{:url('Member/center')}?uid=' + item.uid">{{item.nickname}}</a>
                            </div>
                            <div class="time">{{item.time}}</div>
                        </div>
                        <div class="rpl_content">{{item.content}}</div>
                        <div class="clear"></div>
                    </div>
                </div>

                <div class="load" v-show="loading">
                    <div class="sk-three-bounce t-5">
                        <div class="loading-overlay"></div>
                        <div class="sk-child sk-bounce1"></div>
                        <div class="sk-child sk-bounce2"></div>
                        <div class="sk-child sk-bounce"></div>
                    </div>
                </div>
            </div>

            <button class="load_more" v-show="!loading" v-on:click="loadFlag && load()">{{loadTips}}</button>
        </div>

    </div>

    {include file="common/dialog"}

</div>

{include file="common/footer"}

<script language="JavaScript">

    VUEOPT.data.pageNum = 1;
    VUEOPT.data.list = [];
    VUEOPT.data.loading = 0;
    VUEOPT.data.loadFlag = true;
    VUEOPT.data.loadTips = '加载更多';
    VUEOPT.data.comment = '';
    VUEOPT.data.did = "{:get('did')}";

    VUEOPT.mounted = function(){
        this.load();
    };

    VUEOPT.methods.load = function(){
        var that = this;
        that.loadingMask(true);
        post("{:url('Diary/_commentList')}", buildData(this, ['pageNum', 'did']), function (res) {
            that.loadingMask(false);
            if(res.data.length > 0){
                that.pageNum += 1;
                for(var i in res.data){
                    that.list.push(res.data[i]);
                }
            }else{
                that.loadFlag = false;
                that.loadTips = '没有更多了';
            }
        });
    };

    VUEOPT.methods.reply = function(){
        var id = "{:get('did')}";
        if(this.comment === ''){
            return this.dialog = {msg: '请填写回复内容！'};
        }
        var that = this;
        that.loadingMask(true);
        Ajax("{:url('Diary/_reply')}", {id:id, content:this.comment}, function(res){
            that.loadingMask(false);
            if(res.status === 1){
                window.location.reload();
            }else{
                that.dialog = {msg: res.info};
            }
        });
    };

    Loaded(function () {
        var vm = new Vue(VUEOPT);
    });

</script>